<template>
<div class="login">
    <div>
      <h1 class="loginTitle">登 录</h1>
    </div>

    <div class="loginInput">

      <!-- 判断是否填写了账号密码 -->
      <el-form :model="form" :rules="rules" ref="formRef">

        <!-- 这个是用户名和密码 -->
        <el-form-item prop="username">
          <el-input v-model="form.username" type="text" placeholder="请输入你的账号">
            <template #prefix>
              <el-icon name="user"></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input v-model="form.password" type="password" placeholder="请输入你的密码">
            <template #prefix>
              <el-icon name="lock"></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item prop="captcha">
          <el-input v-model="form.captcha" type="text" placeholder="请输入验证码">
            <template #append>
              <img @click="fetchBase64Image" :src="base64Image" alt="验证码图片" style="height: 20px; width: auto;">
            </template>
          </el-input>
        </el-form-item>

        <el-row>
          <el-col :span="12" style="text-align: left;">
            <el-form-item prop="remember">
              <el-checkbox v-model="form.remember" label="记住我"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </div>

    <!-- 登录 -->
    <div class="loginButton">
      <el-button @click="userLogin" style="width: 24vw;margin-top: 36px;" type="success">立即登录</el-button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import router from '@/router'

export default {
  created () {
    // 一进入页面，就请求验证码回来
    this.fetchBase64Image()
  },
  data () {
    return {
      // 这个是用户的输入
      form: {
        username: '',
        password: '',
        remember: false, // 记住是否点击了
        captcha: '', // 输入的验证码
        key: '' // 验证码的key值
      },

      // 用于存储后端返回的 Base64 图片数据
      base64Image: '',

      // 这个是判断规则，判断输入
      rules: {
        username: [
          { required: true, message: '请输入账号', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }

      // // 这个判断是否点击了登录按钮
      // isClick: false
    }
  },

  // 这个是处理逻辑
  methods: {

    // 封装验证码
    async fetchBase64Image () {
      // 请求接口，获取验证码
      await axios.get('http://localhost:8080/pixington/system/captcha/generate')
        .then((res) => {
          // 将 Base64 字符串赋值给 data 属性
          this.base64Image = res.data.image
          this.generateKey = res.data.key
        })
        .catch(err => {
          this.$message({
            message: err,
            type: 'error',
            duration: 2000
          })
          console.log(err)
        })
    },

    async userLogin () {
      // 处理登录逻辑
      this.$refs.formRef.validate(async (valid) => {
        if (!valid) {
          this.$message({
            message: '请正确输入！',
            type: 'warning',
            duration: 2000
          })
        } else {
          // 如果验证通过，执行登录逻辑
          await axios.post('http://localhost:8080/pixington/system/manager/login', {
            username: this.form.username,
            password: this.form.password,
            key: this.form.key,
            captcha: this.form.captcha
          })
            .then((res) => {
              // 保存token
              if (this.form.remember === true) {
                localStorage.setItem('access_token', res.data.access_token)
              } else {
                sessionStorage.setItem('access_token', res.data.access_token)
              }
              router.push('/')
            })
            .catch((err) => {
              this.$message({
                message: err,
                type: 'error',
                duration: 2000
              })
            })
        }
      })
    }

  }
}
</script>

<style>
.login{
  width: 60%;
  height: 90%;
  text-align: center;
  margin: 88px auto;
  background: rgba(255, 255, 255, 0.3); /* 背景使用半透明颜色，以便展示毛玻璃效果 */
  backdrop-filter: blur(10px); /* 设置毛玻璃效果 */
}

.loginTitle{
  font-size: 38px;
  font-weight: 500;
}

.loginTips{
  margin-top: 18px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.loginInput{
  width: 600px;
  margin: 50px auto;
}
</style>
